<template>
    <div class="api-editor">
        <div class="attr-source-wp">
            <div class="data-source">
                <div class="data-result-title">数据源配置</div>
                <div class="data-source-config">
                    <g-field label="数据来源">
                        <b-radio-group v-model="apiDataConfig.type" type="button" size="mini">
                            <b-radio v-for="(val,key) in ApiTypeMap" :key="key" :label="key">{{ val }}</b-radio>
                        </b-radio-group>
                    </g-field>
                    <!--静态编辑器-->
                    <data-editor
                            v-if="apiDataConfig.type === ApiType.static"
                            :model-value="apiDataConfig.config.data"
                            :height="staticEditorHeight"
                            @change="updateData"
                    />
                    <!--选择分析模型-->
                    <div v-else class="pt-10">
                        <div class="data-result-title">选择数据集</div>
                        <div class="p16">
                            <b-cascader popper-class="train-tree" style="width: 100%" filterable v-model="cid" :options="modelTree" :show-all-levels="false" :props="optionProps" @change="handleChange" />
                        </div>
                        <div class="pt-5 pl-16 pr-16">
                            <b-row :gutter="20">
                                <b-col :span="15">
                                    <b-select style="width: 100%" v-model="modelId" placeholder="选择数据集">
                                        <b-option
                                                v-for="item in modelList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id"
                                        >
                                        </b-option>
                                    </b-select>
                                </b-col>
                                <b-col :span="9">
                                    <b-button v-if="modelId" @click="editModel" type="primary" size="small">配置数据</b-button>
                                </b-col>
                            </b-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <source-drawer ref="sourceDrawerRef"/>
    </div>
</template>

<script setup>
    import {computed, inject, onBeforeUnmount, onMounted, ref, reactive} from 'vue'
    // import { getModelTree } from '@/api/cube/analysis-model.api'
    import {createDataSources, ApiType} from '@/config/data-source'
    import {loadAsyncComponent} from '@/utils/async-component'
    import useSchemaStore from '@/hooks/schema/useSchemaStore'
    import {on, off} from '@/utils/util'
    import {Message} from 'bin-ui-next'
    import SourceDrawer from '@/views/schema/screen-editor/config-panel/data-center-panel/source-drawer.vue'
    const DataEditor = loadAsyncComponent(() => import('../components/data-editor.vue'))
    const ApiTypeMap = createDataSources()
    const optionProps = {
        value: "id",
        label: "name",
        children: "children"
    }
    const staticEditorHeight = ref('260px')
    const sourceDrawerRef = ref(null)
    let treeData = inject('ModelTree', [])
    const modelList = ref([])
    let modelId = ref('')
    let cid = ref('')
    const modelTree = computed(() => {
        modelId.value = apiDataConfig.value.config ? apiDataConfig.value.config.modelId : ''
        cid.value = apiDataConfig.value.config ? apiDataConfig.value.config.cid : ''
        if (cid.value){
            updateModelList(cid.value)
        }
        return treeData.value
    })

    const {selectedCom} = useSchemaStore()
    const apiDataConfig = computed(() => selectedCom.value.apiData)

    const updateData = (data) => {
        apiDataConfig.value.config.data = data
    }

    // const updateModelList = (cid) => {
    //     getModelTree(cid).then(res=>{
    //         modelList.value = res
    //     })
    // }

    const calcEdit = () => {
        staticEditorHeight.value = `${document.body.clientHeight - 260}px`
    }

    const handleChange = (e) => {
        let cid = e[0]
        if (e[1]){
            cid = e[1]
        }
        apiDataConfig.value.config.cid = cid
    }

    const editModel = () => {
        sourceDrawerRef.value?.open({modelId: modelId.value, modelName: apiDataConfig.value.config.modelName})
    }

    onMounted(() => {
        calcEdit()
        on(window, 'resize', calcEdit)
    })
    onBeforeUnmount(() => {
        off(window, 'resize', calcEdit)
    })
</script>

<style lang="scss" scoped>
  .data-source-config {
    :deep(.bin-tree) {
      color: var(--schema-font-color);

      .bin-tree-title, .bin-tree-render-title {
        border: 1px solid transparent;

        &.is-selected, &:hover {
          background: rgba(118, 150, 202, .1);
          border-color: var(--bin-color-primary);
        }
      }
    }
  }
</style>
